【JavaScript】getElementByIdメソッドでul要素を取得し、createElementメソッドでli要素を追加

2023-03-30 05:30| 来源: 网络整理| 查看: 265

こんにちは。たいら(@tairaengineer2)です。今回の記事はJavaScriptの解説記事です。タイトル通り、getElementByIdメソッドでulタグを取得し、createElementメソッドでliタグを追加するプログラムです。

作成したプログラムの概要フォルダ構成 HTML JavaScript 実行結果解説 ul要素に追加 JavaScriptを読み込む位置まとめ作成したプログラムの概要

作成したのは、HTMLとJavaScriptを1ファイルずつ作成しました。 HTMLにはulタグだけ設定しておき、JavaScriptで中身のliタグを作成して表示します。

フォルダ構成

フォルダ構成は↓のようにしています。

f:id:Tairax:20180817160545p:plain

HTML liタグを作成国リストを表示日本 JavaScript // 国リスト var country = ['日本', 'アメリカ', 'イギリス', 'ロシア', 'フランス']; // ul要素を取得 var ul = document.getElementById('country_list'); // ul要素にli要素を追加 for (var count = 0; count < country.length; count++) { // li要素を作成 var li = document.createElement('li'); // テキスト情報を作成 var text = document.createTextNode(country[count]); // ul要素に追加 li.appendChild(text); ul.appendChild(li); } 実行結果

f:id:Tairax:20180817201929p:plain

もともと書いてあったliタグを上書きせず、追加されていますね！

解説

では解説していきます。ここでポイントなのは

ul要素に追加 JavaScriptを読み込む位置

の2つです。

ul要素に追加

追加するためのul要素は

var ul = document.getElementById('country_list');

で取得しています。 getElementByIdメソッドの役割は

指定された ID を持つ要素を返します。

document.getElementById - Web API インターフェイス | MDNから引用させて頂きました

getElementByIdメソッドについては、以下の記事をご参考ください。

www.tairax.com

なので、設定したいul要素のidであるcountry_listを設定してあげると、要素を取得できます。

for文の中の

var li = document.createElement('li');

createElementメソッドの役割は

HTML ドキュメントにおいて Document.createElement() メソッドは、tagName で指定した HTML 要素を生成する、あるいは tagName を認識できない場合に HTMLUnknownElement を生成します。XUL ドキュメントでは、指定した XUL 要素を生成します。その他のドキュメントでは、null 名前空間 URI の要素を生成します。要素の名前空間 URI を明示的に指定するには、document.createElementNS() を使用します。

document.createElement - Web API インターフェイス | MDNから引用させて頂きました

今回でいうと、引数にliを設定してあげると、追加するためのli要素を生成することができる、ということです。 li要素のテキストを設定しているのは

var text = document.createTextNode(country[count]);

新しいテキストノードを生成し、返します。

document.createTextNode - Web API インターフェイス | MDNから引用させて頂きました

↑の文で、li要素にテキスト指定しています

JavaScriptを読み込む位置

JavaScriptの読み込みは、必ずbodyタグの閉じタグの前にすることです。何故かと言いますと、エラーになるからです。

例えば

liタグを作成国リストを表示日本

↑のようにheadタグの中で読み込んでいるとします。この状態で実行すると

f:id:Tairax:20180817204543p:plain

f:id:Tairax:20180817204831p:plain

このようにJavaScriptがエラーとなります。

何故エラーになるかと言いますと、JavaScriptを読み込む前に、idのcountry_listが無いからです。今回のJavaScriptでは、読み込んだと同時に処理が走ります。なので、JavaScriptの前にcountry_listのidが無いと、getElementByIdメソッドはnullしか取得できません。 nullなのに、appendChildメソッドでli要素を追加しようとしているから、エラーで落ちます。

まとめ

以上がgetElementByIdメソッドでul要素を取得し、createElementメソッドでli要素を追加するプログラムを作成しました。あなたのご参考になれば、幸いです。ではでは～(・ω・)ﾉｼ

他にもJavaScript解説記事を書いています。こちらもご参考ください。

【JavaScript】matchメソッドを使って、正規表現で文字列判定するやり方を解説します

【jQuery UI】カレンダーアイコンからカレンダーを表示させる【Datepicker】

【書評】「知識ゼロからのJavaScript入門」はJavaScript初心者におすすめの本

【本文地址】

公司简介

联系我们